<template>
	<div>
		<!-- 顶部选项卡 -->
		<scroll-view class="pagecontrol-top-scroll" scroll-x="true" scroll-with-animation :scroll-into-view="scrollInto">
		    <view class="pagecontrol-top-title">
		        <view v-for="(items, index) in itemsArr" :key="index" class="pagecontrol-top-text" @click="changeTab(index)" :id="'tab' + index">
		            <view :class="tabIndex === index ? 'pagecontrol-top-selected' : 'pagecontrol-top-normal'">{{ items }}</view>
		            <view class="pagecontrol-bottom-line" :class="tabIndex === index ? 'pagecontrol-bottom-line-show' : 'pagecontrol-bottom-line-visibility'"></view>
		        </view>
		    </view>
		</scroll-view>
		<!-- 内容 -->
		<swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:' + scrollH + 'px;'">
		    <swiper-item>
		        <scroll-view scroll-y="true" show :style="'height:' + scrollH + 'px;'" @scrolltolower="scrolltolower('collection')">
					<!--应收-->
					<view @click="handleDetail(item,'collection')" class="source" v-for="(item,index) in collectionList" :key="index">
						<view  style="display: flex;width: 100%;margin-bottom: 20px;">
							<view style="flex: 1;display: flex;flex-direction: column;">
								<text style="font-weight: bold;min-height: 20px;">{{item.outCode}}</text>
								<text :style="{'min-height': '20px','color':(item.status=='0'?'#e43d33':'#18bc37')}">{{status_[item.status]}}</text>
								<text style="min-height: 20px;">发货方：{{item.shipName}}</text>
								<text style="min-height: 20px;">交易金额:￥{{item.tradeAmount||0}}</text>
								<text style="min-height: 20px;">实收总额:￥{{item.realAmount||0}}</text>
							</view>
							<view style="flex: 1;display: flex;flex-direction: column;">
								<text style="color: #a5a5a5;font-size: 12px;min-height: 20px;">创建时间:{{parseTime(item.createTime)}}</text>
								<text style="min-height: 20px;margin-left: 5px;">{{settlementMode_[item.settlementMode]}}</text>
								<text style="min-height: 20px;">收货方：{{item.deliveryName}}</text>
								<text style="min-height: 20px;">应收总额:￥{{item.payableAmount||0}}</text>
								<text style="min-height: 20px;">应收余额:￥{{item.payableBalance||0}}</text>
							</view>
						</view>
						<view style="display: flex;position: absolute;right: 10px;bottom: 10px;">
							<view @click.stop="onConfirmCollection(item,'collection')" hover-class="buttonHover" style="width: 40px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">收款</view>
							<view @click.stop="onConfirmSettle(item,'collection')" hover-class="buttonHover" style="margin-left: 20px;width: 40px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">结清</view>
						</view>
					</view>
					<uni-load-more status="more" :status="loadMoreStatus" @clickLoadMore="scrolltolower('collection')"></uni-load-more>
					<view style="height: 100px;"></view>
		        </scroll-view>
		    </swiper-item>
			<swiper-item>
			    <scroll-view scroll-y="true" show :style="'height:' + scrollH + 'px;'" @scrolltolower="scrolltolower('payment')">
					<!--应付-->
					<view @click="handleDetail(item,'payment')" class="source" v-for="(item,index) in paymentList" :key="index">
						<view  style="display: flex;width: 100%;margin-bottom: 20px;">
							<view style="flex: 1;display: flex;flex-direction: column;">
								<text style="font-weight: bold;min-height: 20px;">{{item.outCode}}</text>
								<text :style="{'min-height': '20px','color':(item.status=='0'?'#e43d33':'#18bc37')}">{{status_[item.status]}}</text>
								<text style="min-height: 20px;">承运商:{{item.carrierName}}</text>
								<text style="min-height: 20px;">交易金额:￥{{item.tradeAmount||0}}</text>
								<text style="min-height: 20px;">实收总额:￥{{item.realAmount||0}}</text>
							</view>
							<view style="flex: 1;display: flex;flex-direction: column;">
								<text style="color: #a5a5a5;font-size: 12px;min-height: 20px;">创建时间:{{parseTime(item.createTime)}}</text>
								<text style="min-height: 20px;margin-left: 5px;">{{settlementMode_[item.settlementMode]}}</text>
								<text style="height: 20px;"></text>
								<text style="min-height: 20px;">应收总额:￥{{item.payableAmount||0}}</text>
								<text style="min-height: 20px;">应收余额:￥{{item.payableBalance||0}}</text>
							</view>
						</view>
						<view style="display: flex;position: absolute;right: 10px;bottom: 10px;">
							<!-- <view hover-class="buttonHover" style="width: 40px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">撤销</view> -->
							<view @click.stop="onConfirmCollection(item,'payment')" hover-class="buttonHover" style="width: 40px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">付款</view>
							<!-- <view @click.stop="onConfirmCollection(item,'payment')" hover-class="buttonHover" style="margin-left: 20px;width: 60px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">付款申请</view> -->
							<view @click.stop="onConfirmSettle(item,'payment')" hover-class="buttonHover" style="margin-left: 20px;width: 40px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">结清</view>
						</view>
					</view>
					<uni-load-more status="more" :status="loadMoreStatus" @clickLoadMore="scrolltolower('payment')"></uni-load-more>
					<view style="height: 100px;"></view>
			    </scroll-view>
			</swiper-item>
		</swiper>
		<confirmCollectionOrPayment ref="confirmCollectionOrPayment" />
		<confirmSettle ref="confirmSettle" />
	</div>
</template>

<script>
	import {receivableList} from '@/api/system/receivable.js'
	import {payableList} from '@/api/system/payable.js'
	import {getDicts} from '@/api/system/dict.js'
	import confirmCollectionOrPayment from './components/confirmCollectionOrPayment.vue'
	import confirmSettle from './components/confirmSettle.vue'
	export default {
		components: {
			confirmCollectionOrPayment,
			confirmSettle
		},
		data() {
			return {
				itemsArr: ['应收','应付'],
				 tabIndex: 0,
				 scrollH: 700,
				 scrollInto: '',
				 
				 collectionList:[],  //应收列表
				 paymentList:[],     //应付列表
				 
				 //结算状态
				 status_:[],
				 //结算方式
				 settlementMode_:[],
				 //应收列表页面大小
				 pageNum_collection:10,
				 //应付列表页面大小
				 pageNum_payment:10,
				 //上拉触底节流标识
				 flag:true,
				 //加载更多
				 loadMoreStatus:'more'
			}
		},
		onLoad(e) {
		    uni.getSystemInfo({
		        success: res => {
		            this.scrollH = res.windowHeight-40;
		        }
		    });
		},
		created() {
			//加载结算状态
			getDicts('settle_status').then(res=>{
				res.data.forEach(item=>{
					this.status_[item.dictValue]=item.dictLabel
				})
			})
			//加载结算方式
			getDicts('settle_type').then(res=>{
				res.data.forEach(item=>{
					this.settlementMode_[item.dictValue]=item.dictLabel
				})
			})
			this.getCollectionList()
		},
		computed: {
			parseTime() {
			   return function (time) {
			        let dateee = new Date(time).toJSON();
			        let date = new Date(+new Date(dateee)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'')  
			        return date
			    }
			 }
		},
		methods: {
			// 触底的时候请求数据，即为上拉加载更多
			scrolltolower(name){
				this.loadMoreStatus='loading'
				if(this.flag){
				    setTimeout(()=>{
						if(name==='collection'){
							this.pageNum_collection+=10;
							this.getCollectionList()
						}
				        else if(name==='payment'){
							this.pageNum_payment+=10;
							this.getPaymentList()
						}
				        this.flag = true;
				    },1000);
				}
				this.flag = false;
			},
			// 切换选项
			changeTab(index) {
			    if (this.tabIndex === index) {
			        return;
			    }
			    this.tabIndex = index;
			    // 滚动到指定元素
			    this.scrollInto = 'tab' + index;
				switch (index) {
					case 0:
						//加载应收列表
						this.getCollectionList()
						break;
					case 1:
						//加载应付列表
						this.getPaymentList()
						break;
					default:
						break;
				}
			},
			// 监听滑动
			onChangeTab(e) {
				uni.showLoading({
					title:'正在加载',
				})
				// setTimeout(function() {
				// 	uni.hideLoading()
				// }, 500);
			    this.changeTab(e.detail.current);
			},
			//获取应收列表
			async getCollectionList() {
				await receivableList({pageNum:1,pageSize:this.pageNum_collection}).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						this.collectionList = res.rows
						this.loadMoreStatus=res.rows.length===this.pageNum_collection?'more':'noMore'
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			//获取应付列表
			async getPaymentList() {
				await payableList({pageNum:1,pageSize:this.pageNum_payment}).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						this.paymentList = res.rows
						this.loadMoreStatus=res.rows.length===this.pageNum_payment?'more':'noMore'
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			//收款、付款
			onConfirmCollection(item,type){
				this.$refs.confirmCollectionOrPayment.open(item,type)
			},
			//结清
			onConfirmSettle(item,type){
				this.$refs.confirmSettle.open(item,type)
			},
			//收款、付款详情
			handleDetail(item,type){
				uni.navigateTo({
					url: '/pages-mine/mine/waybillReceipt/detailsWaybillReceipt?item=' + JSON.stringify(item) +'&type='+type
				})
			},
		},
	}
</script>

<style scoped>
.pagecontrol-top-scroll {
    height: 40px;
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
    border-bottom: 1rpx solid #ededed;
	background-color: #f8f8f8;
}

.pagecontrol-top-title {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.pagecontrol-top-text {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pagecontrol-top-normal {
    color: #656565;
    font-size: 16px;
}

.pagecontrol-top-selected {
    color: #000000;
    font-weight: bold;
    font-size: 16px;
}

.pagecontrol-bottom-line {
    width: 50vw;
    height: 3px;
    margin-top: 8px;
    background-color: #bf5f09;
	border-radius: 11px;
}

.pagecontrol-bottom-line-show {
    visibility: visible;
}

.pagecontrol-bottom-line-visibility {
    visibility: hidden;
}
.source{
	min-height: 120px;
	padding: 10px;
	display: flex;
	flex-direction: row;
	align-items: center;
	border-bottom: 1px solid #ededed;
	background-color: #ffffff;
	position: relative;
}
.buttonHover{
	opacity: 0.6;
}
::v-deep .uni-border-left{
	    border-left-color: #f0f0f0;
	    border-left-style: solid;
	    border-left-width: 1px;
	    background-color: rgb(157,81,38);
	    border-radius: 0 0 11px 0;
	    /* color: white; */
	}
	::v-deep .uni-button-color{
	    color: #ffffff;
	}
</style>